import React, {useEffect, useRef, useState} from 'react';
import {Button, Form, Input, message, Pagination, Popconfirm, Table} from "antd";
import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons";
import {getBlogTypeListApi} from "./blogTypeApi";
import SetBlogType from "./SetBlogType";
import {deleteBlogTypeApi} from "./blogTypeApi";
import {timestampToTime} from "../../utils/dateTimeUtlis";

function BlogType() {
    const [searchData, setSearchData] = useState({})
    const [tableData, setTableData] = useState([])
    const [messageApi, contextHolder] = message.useMessage();
    const [total, setTotal] = useState(0)
    const setBlogType = useRef()
    const formRef = useRef()
    const [loading, setLoading] = useState(false);

    const columns = [
        {
            title: '序号',
            key: 'serialNumber',
            dataIndex: 'serialNumber',
            align: 'center'

        },
        {
            title: '博客类型名称',
            key: 'blogTypeName',
            dataIndex: 'blogTypeName',
            align: 'center'

        },
        {
            title: '类型备注',
            key: 'blogTypeRemark',
            dataIndex: 'blogTypeRemark',
            align: 'center',
            width:'500px',
            ellipsis:true
        },
        {
            title: '创建日期',
            key: 'createdDate',
            dataIndex: 'createdDate',
            align: 'center',
            render: (text) => {
                return (
                    <div>{timestampToTime(text)}</div>
                )
            }

        },
        {
            title: '修改日期',
            key: 'updatedDate',
            dataIndex: 'updatedDate',
            align: 'center',
            render: (text) => {
                return (
                    <div>{timestampToTime(text)}</div>
                )
            }

        },
        {
            title: '操作',
            key: 'edit',
            align: 'center',
            fixed: 'right',
            render: (text) => {
                return (
                    <div style={{display: 'flex', justifyContent: "center"}}>
                        <Button type="link" onClick={() => editBlogType(text)}>编 辑</Button>
                        <Popconfirm
                            title="删除确认"
                            description="是否删除该类型"
                            onConfirm={() => deleteBlogTypeFun(text)}
                            onCancel={cancel}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="link" danger>删 除</Button>

                        </Popconfirm>
                    </div>


                )
            }
        }
    ]
    const [listQuery, setListQuery] = useState({
        page: 1,
        limit: 10
    })

    // 取消
    const cancel = (e) => {
        message.open({
            type: 'info',
            content: '已取消删除'
        });
    };

    // 编辑
    const editBlogType = (row) => {
        setBlogType.current.showModal('编辑博客类型', row)
    }

    const inputChange = (e, name) => {
        setSearchData({...searchData, [name]: e.target.value})
    }

    // 添加按钮
    const addBlogType = () => {
        setBlogType.current.showModal()
    }

    // 删除
    const deleteBlogTypeFun = (row) => {
        const json = {
            blogTypeName: row.blogTypeName
        }
        deleteBlogTypeApi(json).then(res => {
            if (res.code === '200') {
                messageApi.open({
                    type: 'success',
                    content: '删除成功'
                })
                getBlogTypeListFun()

            }
        })
    }

    // 页面初始化请求数据
    useEffect(() => {
        getBlogTypeListFun()
    }, [listQuery])

    // 请求数据
    const getBlogTypeListFun = (data = null) => {
        const json = data || {searchData, listQuery}
        setLoading(true);
        getBlogTypeListApi(json).then(res => {
                if (res.code === '200') {
                    setTableData(res.data.rows.map((i, index) => {
                        i.serialNumber = index + 1
                        return i
                    }))
                    setTotal(res.data.count)
                    setLoading(false)

                }
            }
        ).catch(e => {
            console.log(e)
        })
    }
    // 查询按钮
    const searchFun = () => {
        getBlogTypeListFun()
    }

    // 重置按钮
    const reset = () => {
        formRef.current.resetFields()
        setSearchData({})
        getBlogTypeListFun({reqData: {}, listQuery})
    }

    // 分页
    const paginationChange = (page) => {
        setListQuery({...listQuery, page: page})
    }
    return (
        <div>
            <div style={{display: 'flex', position: "relative"}}>
                <div style={{width: '300px', overflow: 'hidden'}}>
                    <Form
                        name="basic"
                        wrapperCol={{span: 18,}}
                        style={{maxWidth: 600,}}
                        initialValues={{remember: true,}}
                        autoComplete="off"
                        ref={formRef}
                    >
                        <Form.Item
                            label="类型名称"
                            name="blogTypeName">
                            <Input onChange={(e) => inputChange(e, 'blogTypeName')}/>
                        </Form.Item>
                    </Form>
                </div>
                <div>
                    <Button onClick={searchFun} icon={<SearchOutlined/>} type="primary">查 询</Button>
                    <div style={{width: '10px', display: 'inline-block'}}></div>
                    <Button onClick={reset} icon={<SyncOutlined/>}>重 置</Button>
                </div>
                <div style={{
                    display: "inline-block",
                    position: "absolute",
                    right: '0px'
                }}>
                    <Button onClick={addBlogType} icon={<PlusOutlined/>} type="primary">添 加</Button>
                </div>
            </div>
            <div>
                <Table columns={columns}
                       dataSource={tableData}
                       rowKey={'serialNumber'}
                       loading={loading}
                       scroll={{x: '100%', y: 500}}
                       bordered pagination={false}
                />
                <div style={{display: "flex", justifyContent: 'right'}}>
                    <Pagination
                        defaultCurrent={1}
                        pageSize={10}
                        current={listQuery.page}
                        total={total}
                        onChange={paginationChange}/>
                </div>
            </div>
            <SetBlogType ref={setBlogType} getBlogTypeListFun={getBlogTypeListFun}></SetBlogType>
            {contextHolder}
        </div>);
}

export default BlogType;
